<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>题库管理</title>
    <link rel="stylesheet" href="../../js/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="../../js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
    <link rel="stylesheet" href="../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">

    <script src="../../js/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../../js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../js/bower_components/bootbox.min.js"></script>
    <script src="../../js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
    <script src="../../js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
    <script src="../../js/bower_components/bootstrap-table/dist/bootstrap-table.js"></script>
    <script src="../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="../../js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

    <script src="../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <script src="../../js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
    <script src="../../js/bower_components/moment/min/moment-with-locales.min.js"></script>

    <script>
        //直接加载表格
        $(function() {
            param='{"pager": {"pageoffset": 0,"pagesize": 10 }}'
            //数据集合
            $.ajax({
                url: "http://localhost:8080/getAll",
                data: param,
                contentType:'application/json;charset=UTF-8',
                type: "POST",
                success: function(result) {
                    createTable(result.data.list);
                },
                error: function (result) {
                    console.log(result.responseJSON.message);
                }
            });
            $("table").bootstrapTable({
                locale: 'zh-CN'
            });
            //initDictType();
            //模糊查詢
            $('#btnSearch').click(function() {
                var rname = $("#txtRolename").val();
                $.ajax({
                    type: "GET",
                    data: {"rname":rname},
                    dataType: "json",
                    url: "http://localhost:8080/getRoleByRname",
                    contentType: "application/json;charset=utf-8",
                    success: function(rs) {
                        console.log(rs);
                        createTable(rs.data.list);
                    }
                });
            });
            //新增数据
            $("#btnAdd").click(function() {
                $('#divAddUser').modal();
            });

            //保存按钮功能
            $('#butsubmit').click(function() {
                var rname = $("#tbxRname").val();
                var rnote=$("#tbxRnote").val();
                $.ajax({
                    url: "http://localhost:8080/add",
                    type: "GET",
                    data: {"rname":rname,"rnote":rnote},
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(rs) {
                        //alert(rs)
                        if (rs.ok){
                            // alert("111");
                            alert(rs.respMsg);
                            $("#divAddUser").modal("hide");
                            $("#tblResult").bootstrapTable("refresh");
                        }
                    },
                    error:function (rs) {
                        alert("error");
                    }
                });
            });

            //删除数据
            $("#btnDel").click(function() {
                $('#confirmDialog_delmore').modal();

            });
            $('#delOneBtn').click(function() {
                $("#confirmDialog_delmore").modal("hide");
                var rid = getSelect();
                if(rid != null) {
                    // alert(rid);
                    DelDate(rid);
                }
            });
            //删除功能
            //从列表中删除数据
            function DelDate(rid) {
                //alert("11");
                //console.log(uid);
                $.ajax({
                    type: "GET",
                    data:{"rid":rid},
                    dataType: "json",
                    url: "http://localhost:8080/delRole",
                    success: function(result) {
                        //console.info(result)
                        if (result.ok){
                            alert(result.respMsg);
                            $("#tblResult").bootstrapTable('refresh');

                        }
                        /*var str = [],
                            i;
                        //下面使用each进行遍历
                        $.each(result, function(n, value) {
                            //alert(n + ' ' + value);
                            if(value["rid"] != rid) {
                                console.log(str);
                                str.push(value);
                            }
                        });
                        console.log(str.length);
                        if(str.length > 0) {
                            createTable(str);;
                        } else {
                            createTable(result);;
                        }*/
                    }
                });
            }

            //修改数据
            $("#btnEdit").click(function() {
                alert("11")
                $('#editWindow').modal();
            });
            $('#updatestubtn').click(function() {
                $("#editWindow").modal("hide");
                var rid = getSelect();
                console.log(rid);
                if(rid != null) {
                    EditDate(rid);
                }
            });
            //修改功能
            //从列表中修改数据
            function EditDate(rid) {
                var rname = $("#rname").val();
                var rnote=$("#rnote").val();
                //alert("11");
                //console.log(uid);
                $.ajax({
                    type: "GET",
                    data:{"rid":rid,"rname":rname,"rnote":rnote},
                    dataType: "json",
                    url: "http://localhost:8080/updateRole",
                    success: function(result) {
                        //console.info(result)
                        if (result.ok){
                            alert(result.respMsg);

                        }
                    }
                });
            }












        });






        //列表数据绑定
        function createTable(arr) {
            //console.log("列表绑定的数据："+arr);
            $("#tblResult").bootstrapTable('destroy');
            $("#tblResult").bootstrapTable({
                loadMsg: '正在加载...',
                //url: "sysUser.json", //请求后台的URL（*）
                data: arr,
                //queryParams: "queryParams",
                //sidePagination: 'client', //分页方式：client客户端分页，server服务端分页（*）
                striped: true, // 是否显示行间隔色
                clickToSelect: true,
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                uniqueId: "value", //每一行的唯一标识，一般为主键列
                //pageSize: "5", //每页的记录行数（*）
                //pagination: true, // 是否分页
                //sortable: true, // 是否启用排序
                //sortOrder: "desc",
                idField: "roleid",
                /// pageList: [5, 10],
                checkboxHeader: true,
                singleSelect: true, //开启单选
                onClickRow: function(row) {
                    alert(row.value);
                    gbid = row.value;
                },
                columns: [
                    {
                        field: "state",
                        checkbox: true,
                        align: 'center',
                    },{
                        field: 'rname',
                        title: "角色名称",
                        halign: 'center'
                    }, {
                        field: 'rnote',
                        title: "备注",
                        halign: 'center'
                    },{
                        field: "rdisabled",
                        title: "是否启用",
                        align: 'center',
                    }

                ]
            });
        }
        //下拉框权限绑定

        function initDictType() {
            $('#selRoleisenable').empty();
            $.ajax({
                type: 'Get',
                url: 'zidian.json',
                dataType: "Json",
                success: function(data) {
                    if(!data.flag) {
                        $.each(data, function(i, n) {
                            $('#selRoleisenable').append(" <option value=\"" + n.isenable + "\">" + n.isenablename + "</option>");
                        })
                        $('#selRoleisenable').selectpicker('refresh');
                    }
                }
            });
            option = new Option("全部", "-1");
            $('#selRoleisenable').append(option); //注入
            $('#selRoleisenable').selectpicker("refresh"); //刷新
            $('#selRoleisenable').selectpicker("render"); //您可以使用render方法强制重新渲染引导程序
        }
        //获取列表选中行

        function getSelect() {
            var a = $("#tblResult").bootstrapTable('getSelections');
            // console.info(a);
            if(a.length > 0) {
                return a[0].rid;
            } else {
                bootbox.alert("必须要选择一条信息！");
            }
        }


    </script>
</head>
<body>
<div class="alert alert-info">当前位置<b class="tip"></b>查询界面<b class="tip"></b>表单样式</div>
<!--查询区域-->
<div class="container-fluid">
    <div class="row col-md-10">
        <div id="divSearchForm" class="form-inline">
            <div class="form-group">
                <label class="control-label" for="txtRolename">角色名称：</label>
                <input class="form-control" type="text" id="txtRolename" />
            </div>
            <div class="form-group">
                <button type="button" id="btnSearch" class="btn btn-primary">
                    检索
                </button>
            </div>
        </div>
    </div>
    <!--功能区域-->
    <div style="margin-top: 5px;" class="row col-md-10">
        <div id="toolsButtons">
            <button type="button" id="btnAdd" class="btn btn-success">新增</button>
            <button type="button" id="btnEdit" class="btn btn-info">修改</button>
            <button type="button" id="btnDel" class="btn btn-danger">删除</button>
        </div>
    </div>
    <!--列表区域-->
    <div class="row col-md-10" style="margin-top: 10px;">
        <table id="tblResult"></table>
    </div>
</div>

<!-- 新增数据 -->
<div class="modal fade" id="divAddUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增用户信息</h4>
            </div>
            <div class="modal-body form-inline ">
                <div class="form-group">
                    <label class="control-label" for="tbxRname">角色名：</label>
                    <input style="width: 230px;" class="form-control" type="text" id="tbxRname" />
                </div>
                <div class="form-group" style="margin-top: 5px;">
                    <label class="control-label" for="tbxRnote">备　注：</label>
                    <input style="width: 230px;" class="form-control" type="text" id="tbxRnote" required="required" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="butsubmit">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!-- 修改-模态框 -->
<div class="modal fade" id="editWindow" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改信息</h4>
            </div>
            <form class="form-horizontal" id="updateForm" style="margin: 30px;">
                <input type="hidden" name="editId" id="editId"/>

                <div class="form-group">
                    <label for="rname" class="col-md-offset-2 col-md-2 control-label">角色名</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="rname"
                               id="rname" placeholder="角色名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="rnote" class="col-md-offset-2 col-md-2 control-label">备注</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="rnote" id="rnote"
                               placeholder="备注" >
                    </div>
                </div>

                <div class="form-group modal-footer">
                    <div class="col-md-offset-4 col-md-6">
                        <span id="returnMessage" class="glyphicon"></span>
                        <button type="button" id="updatestubtn" class="btn btn-info">修改</button>
                        <button type="reset" id="resetBtn" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--删除-->
<!-- confirm --一个用户的确认删除框 -->
<div class="modal fade" id="confirmDialog_delmore" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <div>操作提示</div>
            </div>
            <h3 class="modal-body">确认删除？</h3>
            <div class="modal-footer">
                <button type="button" id="delOneBtn" class="btn btn-danger">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>